<template>
  <div>
    <div>
      <div class="head">
        <el-form inline size="mini">
          <el-form-item>
            <el-input placeholder="请输入角色名称" v-model="selectData.roleName" @keyup.enter.native="searchData"
              style="width: 200px">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-plus" @click="open_dialog('add')">新增</el-button>
            <el-button type="primary" icon="el-icon-search" @click="searchData">搜索</el-button>
            <el-button icon="el-icon-refresh" type="danger" @click="clearForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table :data="tableData" size="mini" border v-loading="loading" empty-text="暂无数据">
      <el-table-column label="角色编号" width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色描述" width="500px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.roleDesc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="handleCommand('edit', scope.row)">
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button size="mini" type="danger" @click="handleCommand('del', scope.row)">
            <i class="el-icon-delete"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[5, 10, 15]" :page-size="pageSize" layout="total, sizes, prev, pager, next"
        :total="total"></el-pagination>
    </div>
    <role-detail :dialogVisible.sync="dialogVisible" :type="type" :editId="editId" @submit="resetData" />
  </div>
</template>

<script>
import { role_page, role_del } from "@/api/sysrole";
import roleDetail from "./module/role-detail";

export default {
  components: {
    roleDetail: roleDetail
  },
  data() {
    return {
      editId: 0,
      dialogVisible: false,
      type: "add",
      tableData: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      selectData: {
        roleName: ""
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    /**
     * 事件切换
     */
    handleCommand(cmd, data) {
      if (cmd === 'edit') {
        this.open_dialog('edit', data.id)
      }
      if (cmd === 'del') {
        this.delRole(data.id)
      }
    },
    clearForm() {
      this.selectData = {};
      this.getData();
    },
    /**
     * 改变每页大小
     */
    handleSizeChange(e) {
      this.pageSize = e;
      this.getData();
    },
    /**
     * 改变当前页
     */
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getData();
    },
    /**
     * 重新获取数据
     */
    resetData() {
      this.dialogVisible = false;
      this.getData();
    },
    /**
     * 打开弹窗
     */
    open_dialog(type, editId) {
      this.dialogVisible = true;
      this.type = type;
      this.editId = editId;
    },
    searchData() {
      this.pageNum = 1;
      this.getData();
    },
    /**
     * 删除用户
     *
     */
    delRole(id) {
      this.$confirm("是否删除该角色?", "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const res = await role_del(id);
        this.$message.success(res);
        this.pageNum = 1;
        this.getData();
      });
    },
    /**
     * 获取分页数据
     */
    async getData() {
      this.loading = true;
      let params = {};
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      params.roleName = this.selectData.roleName;
      const res = await role_page(params);
      this.loading = false;
      this.tableData = res.records;
      this.total = Number.parseInt(res.total);
    }
  }
};
</script>

<style lang="less"></style>
